<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>公司权限设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="authority-setting">
      <div class="authority-setting-handle">
        <sys-autocomplete v-model="search.companyName" size="medium" :options="companyNameList" placeholder="请输入搜索公司名称" style="width:230px">
        </sys-autocomplete>
        <el-button size="medium" type="primary" @click="searchData">搜索</el-button>
      </div>
      <div class="authority-setting-table-div">
        <el-table fit stripe border :data="pageComanyList" height="parent">
          <el-table-column label="公司id" prop="id" min-width="100px" align="center"></el-table-column>
          <el-table-column label="公司名称" prop="name" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="联系电话" prop="phone" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="联系人" prop="userName" min-width="140px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="支付时间" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.payTime!==null">{{moment(scope.row.payTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="到期时间" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.endTime!==null">{{moment(scope.row.endTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="提醒时间" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.clockTime!==null">{{moment(scope.row.clockTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="settingAuthority(scope.row)">设置权限</el-button>
              <el-button size="mini" type="primary" @click="settingValidDate(scope.row)">设置有效时间</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog title="设置公司权限" :visible.sync="openForm" top="5vh" @closed="selectCompany=null">
      <div style="height:calc(90vh - 54px);overflow:auto">
        <authority-form v-if="openForm" :company="selectCompany" @save-success="openForm=false"></authority-form>
      </div>
    </el-dialog>

    <el-dialog title="设置有效时间" :visible.sync="openValid" width="400px" top="calc(50vh - 160px)" @closed="selectCompany=null">
      <div style="height:240px;overflow:auto">
        <valid-date-setting v-if="openValid" :company="selectCompany" @setting-success="settingSuccess"></valid-date-setting>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/authorityForm.css",
    "./css/validDateSetting.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysAutocomplete.js"
  ]);

</script>
<script src="./authorityForm.js"></script>
<script src="./validDateSetting.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        companyName: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        companyList: [],
        searchCompanyList: [],
        pageComanyList: [],
        companyNameList: [],
        selectCompany: null,
        openForm: false,
        openValid: false,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 20
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setCompanyList().then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setCompanyList: function () {
        var self = this;
        return ajaxRequest('company/getAllCompany').then(function (companyList) {
          var companyNameList = [];
          var fields = ['payTime', 'endTime', 'clockTime'];
          for (var i = 0; i < companyList.length; i++) {
            var company = companyList[i];
            companyNameList.push(company.name);

            for (var j = 0; j < fields.length; j++) {
              var field = fields[j];
              var timeValue = company[field];
              if (SysUtil.isEmpty(timeValue)) {
                timeValue = null;
              } else {
                timeValue = moment(timeValue).valueOf();
              }
              company[field] = timeValue;
            }
          }

          self.companyNameList = companyNameList;
          self.companyList = companyList;
          self.toSearchData(true);
          return companyList;
        });
      },

      toSearchData: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }
        var companyName = this.search.companyName;
        var companyList = this.companyList;
        if (companyName !== '') {
          companyList = _.filter(companyList, function (company) {
            var name = company.name;
            if (SysUtil.isEmpty(name)) {
              return false;
            }
            return name.indexOf(companyName) !== -1;
          });
        }
        this.searchCompanyList = companyList;
        this.pagination.totalCount = companyList.length;
        this.toPageData();
        if (isSearch) {
          this.oldSearch = _.cloneDeep(this.search);
        }
      },

      toPageData: function () {
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var startIndex = (currentPage - 1) * pageSize;
        var companyList = this.searchCompanyList;
        companyList = companyList.slice(startIndex, startIndex + pageSize);
        this.pageComanyList = companyList;
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.toSearchData(true);
      },

      pageChange: function () {
        this.toPageData();
      },

      settingAuthority: function (company) {
        this.selectCompany = company;
        this.openForm = true;
      },

      settingValidDate: function (company) {
        this.selectCompany = company;
        this.openValid = true;
      },

      settingSuccess: function () {
        this.openValid = false;
        this.loading = true;
        var self = this;
        this.setCompanyList().then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SysAutocomplete: SysAutocomplete,
      AuthorityForm: AuthorityForm,
      ValidDateSetting: ValidDateSetting
    }
  });

</script>

<style>
  .authority-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column
  }

  .authority-setting .authority-setting-handle {
    margin-bottom: 10px;
  }

  .authority-setting .authority-setting-table-div {
    flex: 1;
    overflow: auto;
  }

  .authority-setting .authority-setting-table-div .el-button+.el-button {
    margin-left: 0;
  }

</style>

</html>
